<template>
	<view class="m">
		<u-popup :show="show" :round="24" mode="center" :safeAreaInsetBottom="false" :safeAreaInsetTop="false">
			<view class="modal">
				<view class="modal-title">
					{{ title }}
				</view>
				<view class="modal-content">
					{{ content }}
				</view>
				<view class="modal-footer">
					<view class="btn cancel-btn" v-if="showCancel" @click="cancel()">{{ cancelText }}</view>
					<view class="btn confirm-btn" @click="confirm()">{{ confirmText }}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"c-modal",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ''
			},
			content: {
				type: String,
				default: ''
			},
			showCancel: {
				type: Boolean,
				default: false,
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			confirmText: {
				type: String,
				default: '确定'
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			confirm() {
				this.$emit('confirm')
			},
			cancel() {
				this.$emit('cancel')
			}
		}
	}
</script>

<style scoped lang="scss">
.m {
	z-index: 999999999999999999;
}
.modal {
	width: calc(100vw - 48px);
	background-color: #FFFFFF;
	padding: 14px 0;
	border-radius: 20px;

	&-title {
		color: #232832;
		text-align: center;
		font-size: 19px;
		font-weight: bold;
	}
	
	&-content {
		margin: 18px 0;
		color: #232832;
		text-align: center;
		font-size: 17px;
		line-height: 22px;
	}
	
	&-footer {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 14px 14px 0;
		
		.btn {
			width: 100%;
			margin: 0 10px;
			padding: 10px 0;
			border-radius: 20px;
			text-align: center;
		}
		
		.confirm-btn {
			background-color: #6E86FF;
			color: #ffffff;
		}
		
		.cancel-btn {
			background-color: transparent;
			border: 1px solid #787B86;
			color: #D1D1D6;
		}
	}
}
</style>